<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    var Word = function(t,x,y,fontSize){
        this.t = t;
        this.x = x;
        this.y = y;
        this.fontSize = fontSize;
    };

    Word.prototype = {
        setFont:function(fontSize){
            this.fontSize = fontSize;
        },
        getFont:function(){
            return "bolder "+this.fontSize+"px 宋体";
        }
    };

    function initWords(words,x,y){
        var wordsSplit = words.split("");
        var wordsArray = [];
        for(var i=0;i<wordsSplit.length;i++){
            var word = new Word(wordsSplit[i],x+i*20,y+100,40);
            wordsArray.push(word);
        }
        return wordsArray;
    }


    function loading(words,x,y,cycle){
        var wordsArray = initWords(words,x,y);
        ctx.font = "bolder 40px 宋体";
        ctx.fillText(words,x,y);

        var index=0;
        var s = setInterval(function(){
            ctx.clearRect(0,0,c.width,c.height);
            for(var i=0;i<wordsArray.length;i++){
                var indexZ = index%wordsArray.length;
                if(indexZ === i){
                    wordsArray[i].setFont(60);
                }
                ctx.font = wordsArray[i].getFont();
                ctx.fillText(wordsArray[i].t,wordsArray[i].x,wordsArray[i].y);
                if(indexZ === i){
                    wordsArray[i].setFont(40);
                }
            }
            index += 1;
        },cycle);

    }
    //ctx.fillText("this is a loading~",100,200);

    //loading("this is a loading~",200,200,200);
    loading("this is other loading!",200,100,100);

</script>
</body>
</html>